<template>
  <div id="indexBox">
    <!-- 上部分 -->
    <div class="top">
      <!-- 上左部分-->
      <div class="top_left">
        <div class="print_box">
          <img src="@/assets/Home/bannerbg.jpg"
               style="width: 100%; height:100%;" />
          <i class="print">校&nbsp;&nbsp;&nbsp;园&nbsp;&nbsp;&nbsp;趣&nbsp;&nbsp;&nbsp;坛</i>
        </div>
        <!-- 轮播图 -->
        <div class="swiper_box">
          <el-carousel :interval="4000"
                       type="card"
                       height="200px">
            <el-carousel-item v-for="(item,index) in imgs"
                              :key="index"
                              style="border-radius:5px;">
              <div style="overflow: hidden">
                <img :src="item.url"
                     style="width: 100%;" />
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <!-- 上右部分 -->
      <div class="top_right">
        <!-- 校园资讯 -->
        <div class="hot_news">
          <h2>校园资讯</h2>
          <div class="news_item ell"
               v-for="(item,index) in newsData"
               :key="index"
               @click="getNewsDetail(item)">
            {{item.summary}}
          </div>
        </div>
      </div>
    </div>
    <!-- 下部分 -->
    <div class="bottom">
      <h2>热门论坛</h2>
      <!-- 热门论坛 -->
      <div class="talks_box">
        <!-- 论坛 -->

        <div class="talks"
             v-for="(item,index) in topPosts"
             :key="item.id">
          <Tilt :options="options"
                :parallax="true">
            <!-- 论坛图片 -->
            <div class="banner">
              <img :src="item.indexImage" />
            </div>
            <!-- 名称和简介 -->
            <div class="con">
              <h3 class="name">
                {{item.talkName}}
              </h3>
              <div class="summary">
                {{item.summary}}
              </div>
            </div>
            <!-- 进入论坛 -->
            <div class="join"
                 @click="$router.push({
              path:'TalkDetail',
              query:{
                id:item.id
              }
            })">查看论坛</div>
          </Tilt>
        </div>

      </div>
    </div>

    <!-- 新闻详情 -->
    <el-dialog :title="nowNews.summary"
               :visible.sync="dialogVisible"
               width="50%">
      <div v-html="nowNews.content"></div>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>



<script>
import {
  getHomeImg, getInfomation,
  getTopPosts
} from "@/api/home"
import axios from 'axios'
import Tilt from '@/components/tile.vue'
export default {
  name: 'SchoolForumIndex',
  components: { Tilt },
  data () {
    return {
      weatherInfo: {},//天气信息
      imgs: [],//轮播图
      newsData: [],//校园资讯
      topPosts: [],//前十论坛
      dialogVisible: false,
      newsDetail: '',
      options: { max: 30, speed: 3000 },
      dialogVisible: false,
      nowNews: {}
    };
  },

  mounted () {
    this.getData()
  },

  methods: {

    // 获取湖南省天气
    // getWeatherInfo () {
    //   axios({
    //     method: 'GET',
    //     url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=7bdfe695c6a82d213c2e16b8b95a1d3d&city=430000'
    //   }).then(resp => {
    //     this.weatherInfo = resp.data.lives[0]
    //   })
    // },

    getNewsDetail (news) {
      this.nowNews = news
      this.dialogVisible = true
      console.log(news)

    },

    showDetail (content) {
      this.dialogVisible = true
      this.newsDetail = content
    },

    getData () {
      // this.getWeatherInfo()

      getHomeImg().then(resp => {
        this.imgs = resp
      })

      getInfomation().then(resp => {
        this.newsData = resp
      })

      getTopPosts().then(resp => {
        this.topPosts = resp.list
        this.topPosts.reverse()
      })

    }
  },
};
</script>

<style lang="scss" scoped>
#indexBox {
  width: 100%;
  height: 100%;
  overflow: auto;
  // 上部分样式
  .top {
    display: flex;
    // border: 1px solid red;
    // 上左样式
    .top_left {
      flex: 3;
      padding-right: 15px;
      border-right: 1px solid rgb(17, 151, 218);
      // 打字机样式
      .print_box {
        // border: 1px solid red;
        height: 180px;
        margin: 0 0 20px 0;
        background-color: #ffffff;
        position: relative;
        // background: url("https://w.wallhaven.cc/full/x6/wallhaven-x66olo.jpg") no-repeat;

        .print {
          // width: 100px;
          color: #7da3c2;
          font-size: 50px;
          font-weight: bolder;
          position: absolute;
          top: 60%;
          left: 40%;
          margin-top: -60px;
          margin-left: -60px;
          // border: 1px solid red;
        }
      }

      // 轮播图
      .swiper_box {
        // border: 1px solid red;
      }
    }
    // 上右样式
    .top_right {
      flex: 1;
      // border: 1px solid blue;
      overflow: hidden;
      // 校园资讯
      .hot_news {
        margin: 30px;
        .news_item {
          line-height: 50px;
          color: gray;
          cursor: pointer;
          max-width: 95%;
          margin-left: 15px;
        }
        .news_item:hover {
          color: red;
        }
      }
    }
  }
  // 下部分样式
  .bottom {
    // border: 1px solid black;
    h2 {
      color: rgb(93, 115, 210);
      box-sizing: border-box;
      margin: 2px;
    }
    // 论坛盒子
    .talks_box {
      display: flex;
      box-sizing: border-box;

      // 单个论坛
      .talks {
        width: 25%;
        margin: 5px 20px;
        color: #ffffff;
        background-color: #ffffff;
        border-radius: 20px;
        // 论坛图片
        .banner {
          box-sizing: border-box;
          width: 100%;
          height: 150px;
          text-align: center;
          background-color: #81c5f8;
          border-top-left-radius: 20px;
          border-top-right-radius: 20px;
          // 图片样式
          img {
            width: 120px;
            margin: 10px;
            border: 1px solid #ffffff;
            border-radius: 50%;
            overflow: hidden;
          }
        }
        // 名称和简介
        .con {
          width: 100%;
          margin: auto;
          text-align: center;

          // 名称样式
          .name {
            color: #3c3c3c3c;
            font-weight: bolder;
            padding: 10px 0 5px 0;
          }
          // 简介样式
          .summary {
            color: #9e9e9e;
            padding: 0px 0px 25px 0px;
            font-size: 5px;
          }
        }
        // 加入论坛
        .join {
          height: 50px;
          line-height: 50px;
          font-weight: bolder;
          cursor: pointer;
          text-align: center;
          background-color: #f6901a;
          border-bottom-left-radius: 20px;
          border-bottom-right-radius: 20px;
        }
      }
    }
  }
}

// 省略号样式
.ell {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

// 轮播图样式
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

:root {
  --color: #b9deff;
  --sunColor: #ffca22;
  --downColor: rgba(18, 117, 204, 1);
  --downColor2: rgba(18, 117, 204, 0.2);
  --start: #81c5f8;
  --end: #1181df;
}

// 媒体查询 页面监控 width-size > 1150px => CareeBy
@media screen and (max-width: 1200px) {
  .top_right {
    display: none;
  }
  .talks:nth-child(5) {
    display: none;
  }
}
// 媒体查询 页面监控 width-size > 880px => CareeBy
@media screen and (max-width: 880px) {
  .talks:nth-child(4) {
    display: none;
  }
}
</style>
